<template>
	<div class="areaDialogue" ref="box">
		<!-- 头部 -->
		<div class="absHead" ref="head">
      <Dialog-header class="targetInfo bg-gray100 dis-flex flex-sbc"></Dialog-header>
		</div>
		<!-- 聊天区 -->
		<div class="absBody" ref="body">
			<Dialog-center ref="msgArea" :style="{height:`${molleHeight[0]}px`}">
      </Dialog-center>
			<!-- 自由拖动 -->
			<VueDragResize :w="'auto'" :h="'auto'" :parentLimitation="true"
      :sticks="[]" :axis="'y'" :x="0" :y="molleHeight[0]"
        @dragging="test" style="background-color:#fff;width:100%;height:44px;">
				<!-- 选择区 -->
        
				<div class="tools bg-gray90" ref="ta">
					<Dialog-tool
            v-if="!isMobile"
            @addEmoji="addEmoji"
            @sendImage="readySendMsg">
          </Dialog-tool>
					<!--5 带出emoji或素材库的文本 需要额外处理-->
				</div>
			</VueDragResize>
			<!-- 底部输入框 -->
			<Dialog-footer ref="msgEditArea" class="richtxt bg-gray95"
			:style="{height:`${molleHeight[2]}px`}"
			@editChange="editChange"
			@keyup.ctrl.13.native="readySendMsg({type:'text'})"></Dialog-footer>
			<!--6 内置一个接收来自5的emoji或文本的方法-->
		</div>
		<div class="absFoot" ref="foot">
			<!-- 发送按钮 -->
			<div class="sendOut dis-flex flex-rt bg-gray95">
        <el-button type="primary" @click="readySendMsg({type:'text'})"
          :disabled="disabledSend">
          <!-- "JSON.stringify(userMsg.detail)=='{}'" -->
          发送 (Ctrl+Enter)
        </el-button>
			</div>
		</div>
		<!-- <ws ref="ws"></ws> -->
	</div>
</template>

<script src="./dialogBox.js"></script>

<style lang="less" scoped src="./dialogBox.less"></style>
